<template>
  <div class="app-container">
    <el-card>
      <div class="block">

        <el-form :inline="true" :model="listQuery">
          <el-form-item label="企业名称">
            <el-input v-model="listQuery.username" size="small" clearable />
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="listQuery.realname" size="small" clearable />
          </el-form-item>
          <el-form-item label="联系人手机">
            <el-input v-model="listQuery.telephone" size="small" clearable />
          </el-form-item>
          <el-form-item>
            <el-button
              type="success"
              size="small"
              icon="el-icon-search"
              @click.native="handleFilter"
            >搜索</el-button>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-refresh"
              @click.native="resetFilter"
            >重置</el-button>
          </el-form-item>
        </el-form>

        <br>
      </div>

      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        :header-cell-style="{background:'#f5f7fa'}"
        max-height="650"
        style="width: 100%;"
      >
        <el-table-column label="企业" align="center" prop="username" />
        <el-table-column label="地址" align="center" prop="address" />
        <el-table-column label="联系人" align="center" prop="realname" />
        <el-table-column label="联系人手机" align="center" prop="telephone" />
        <el-table-column label="操作" min-width="80px" align="center">
          <template slot-scope="{row}">
            <el-button
              v-permission="['admin',]"
              type="danger"
              size="mini"
              plain
              icon="el-icon-s-operation"
              @click.native="showResetPasswordDialog(row)"
            >修改密码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </el-card>

    <el-dialog
      :title="textMap[accountDialogStatus]"
      :visible.sync="dialogFormVisible"
      width="70%"
    >
      <el-form ref="form" status-icon :model="temp" :rules="rulesList" label-width="120px" label-position="right">
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号" prop="username">
              <el-input v-show="accountDialogStatus=='create'" v-model="temp.username" />
              <el-input v-show="accountDialogStatus=='update'" v-model="temp.username" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="realname">
              <el-input v-model="temp.realname" autocomplete="off" />
            </el-form-item>
          </el-col>
          <template v-if="accountDialogStatus=='create'">
            <el-col :span="12">
              <el-form-item label="密码" prop="password">
                <el-input v-model="temp.password" autocomplete="off" /></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="确认密码" prop="checkPassword">
                <el-input v-model="temp.checkPassword" autocomplete="off" />
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="telephone">
              <el-input v-model="temp.telephone" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否在职" prop="is_active">
              <el-switch v-model="temp.is_active" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="accountDialogStatus==='create'?createData():updateData()">
          确定
        </el-button>
        <el-button @click.native="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="重置密码" :visible.sync="resetPasswordDialogVisible">
      <el-form ref="resetForm" :model="form" :rules="resetPasswordRulesList" label-width="120px">
        <el-form-item label="新密码" prop="new_password">
          <el-input v-model="form.new_password" style="width:70%" />
        </el-form-item>
        <el-form-item label="再次输入新密码" prop="checked_new_password">
          <el-input v-model="form.checked_new_password" style="width:70%" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetPasswordDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleResetPassword">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script src="./index.js"></script>

<style>

.block {
  padding: 10px 0px;
}

</style>
